<template>
  <div class="modify-wfnodelog-container">
    <el-dialog v-if="dialogFormVisible" v-el-drag-dialog :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="1000px" :title="title" @close="closeDialog">
      <div v-if="loading" v-loading="loading" class="el-dialog__body" />
      <div v-if="modifyType =='callback'||modifyType =='flowadmin'" class="el-table-toolbar el-table-toolbar-right">
        <template v-if="modifyType =='callback'">
          <el-checkbox v-if="msgTypeOptions===null" v-model="callbackSendsms" :true-label="1" :false-label="null">短信通知</el-checkbox>
          <el-checkbox v-else-if="msgTypeOptions.length===1" v-model="callbackSendsms" :true-label="msgTypeOptions[0].value" :false-label="null">{{ msgTypeOptions[0].text }}通知</el-checkbox>
          <div v-else-if="msgTypeOptions.length>1" style="display:inline-block">
            <el-select v-model="callbackSendsms" class="msgType-select" clearable placeholder="选择通知方式">
              <el-option v-for="msgType in msgTypeOptions" :key="msgType.value" :value="msgType.value" :label="msgType.text+'通知'" />
            </el-select>
          </div>
        </template>

        <el-button-group>
          <el-button v-if="modifyType =='callback'" plain size="small" icon="el-icon-refresh-left" @click="btnCallbackClick()">收 回</el-button>
          <el-button v-if="modifyType =='flowadmin'" plain size="small" icon="el-icon-close" @click="btnDeleteWflogClick()">删 除</el-button>
          <el-button plain size="small" icon="el-icon-switch-button" @click="closeDialog">关 闭</el-button>
        </el-button-group>
      </div>
      <el-table v-if="!loading" :data="wfNodelogList" border style="width: 100%" :row-class-name="rowClassName">
        <el-table-column :label="modifyType =='donext'?'序号':' '" type="index" width="45" align="center">
          <template slot-scope="scope">
            <span v-if="modifyType =='flowadmin'">
              <el-checkbox v-model="selTNID" type="checkbox" :label="scope.row.id" :disabled="scope.row.parentId == null||scope.row.parentId == ''" />
            </span>
            <span v-if="modifyType =='callback'">
              <el-checkbox v-if="callTNID==scope.row.parentId" v-model="selTNID" type="checkbox" :label="scope.row.id" :checked="scope.row.openTime==null || callbackMode=='beforesubmit'" :disabled="!(scope.row.openTime==null || callbackMode=='beforesubmit') || allCallback" />
            </span>
            <span v-if="modifyType =='donext'||modifyType =='forward'">
              <span>{{ scope.$index + 1 }}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="处理环节" prop="nodeName" width="120" align="left" />
        <el-table-column label="处理人" prop="staffName" width="80" align="center" />
        <el-table-column label="开始时间" prop="createTime" width="90" align="center" />
        <el-table-column label="完成时间" prop="completeTime" width="90" align="center" />
        <el-table-column label="办理时限" prop="limitTime" width="90" align="center" />
        <el-table-column label="处理意见" align="center">
          <template slot-scope="scope">
            {{ scope.row.ideaContent }}
            <el-link v-if="modifyType =='flowadmin'&&scope.row.idea!=null&&scope.row.idea!=''" type="primary" icon="el-icon-edit" @click="btnModifyIdeaClick(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column label="提交路径" prop="pathName" width="120" align="center" />
        <el-table-column v-if="modifyType =='flowadmin'||modifyType =='donext'||modifyType =='forward'" label="操作" :width="modifyType =='donext'?85:125" align="center">
          <template slot-scope="scope">
            <template v-if="scope.row.taskType!==0&&scope.row.taskType!==9">
              <el-link v-if="scope.row.status==9&&modifyType =='flowadmin'" :underline="false" type="primary" icon="el-icon-refresh-right" @click.stop="btnFlowAdminToNextClick(scope.row,'redo')">重办</el-link>
              <el-link v-if="scope.row.status==9&&modifyType =='flowadmin'" :underline="false" type="primary" icon="el-icon-plus" @click.stop="btnAddWfUserClick(scope.row)">新增</el-link>
              <el-link v-if="(scope.row.status<=5||scope.row.status==8)&&(modifyType =='flowadmin'||(modifyType =='donext'&&callTNID==scope.row.parentId))" :underline="false" type="primary" icon="el-icon-check" @click.stop="btnFlowAdminToNextClick(scope.row,'agency')">代办</el-link>
              <el-link v-if="(scope.row.status<=5||scope.row.status==8)&&(modifyType =='flowadmin'||modifyType =='forward')" v-model="scope.row.forwardStaffId" v-select-dialog="'staff'" type="primary" icon="el-icon-position" :underline="false" name="WflowForward" :wflog-id="scope.row.id">转办</el-link>
            </template>
            <template v-else>
              <el-link v-if="modifyType =='flowadmin'" :underline="false" type="primary" icon="el-icon-close" @click.stop="btnDeleteWflogClick(scope.row)">删除</el-link>
            </template>
          </template>

        </el-table-column>
      </el-table>
    </el-dialog>

    <ModifyWflogAddUser />
    <ModifyWflogSubmitFile />
    <ModifyWflogIdea />
    <WriteToReadIdea />
  </div>
</template>

<script>

export default {
    name: 'ModifyWfNodelog',
    components: {

    },
    props: {
        callbackOrderBy: { type: String, default: 'createTime,processOrder' },
        showReadlog: { type: Number, default: 0 }
    },
    data() {
        return {
            title: '流程管控',
            dialogFormVisible: false,
            wfInstance: {},
            curTN: {},
            wfNodelogList: [],
            selTNID: [],
            modifyType: '',
            modifyWfNodelogUrl: '',
            callbackMode: null,
            callbackSendsms: null,
            loading: false,
            allCallback: false,
            msgTypeOptions: null
        }
    },
    computed: {

    },
    watch: {
    },
    created() {
        this.$bus.on('showModifyWfNodelog', this.showModifyWfNodelog)
    },
    beforeDestroy() {
        this.$bus.off('showModifyWfNodelog', this.showModifyWfNodelog)
    },
    mounted() {

    },
    methods: {
        showModifyWfNodelog(wfInstance, curTN, modifyType, modifyWfNodelogUrl, allCallback) {
            if (this.loading) {
                return
            }

            this.wfInstance = wfInstance
            this.curTN = curTN
            this.modifyType = modifyType
            this.modifyWfNodelogUrl = modifyWfNodelogUrl
            this.selTNID = []
            this.allCallback = allCallback || false

            if (modifyType === 'forward') {
                this.forwardTodo()
            } else {
                this.title = (modifyType === 'callback' ? '收回文件' : '流程管控')
                this.dialogFormVisible = true
                this.loadWfNodelogList()
            }
        },
        loadWfNodelogList() {
            this.loading = false

            this.$nextTick(() => {
                this.loading = true

                const params = { 'wfInstanceId': this.wfInstance.id, 'modifyType': this.modifyType, 'showReadlog': this.showReadlog }
                if (this.modifyType === 'callback') {
                    params.orderBy = this.callbackOrderBy
                }

                this.$http({
                    method: 'POST',
                    contentType: 'application/x-www-form-urlencoded',
                    params: params,
                    url: 'workflow/wfInstanceNodelog/listWfNodelog'
                }).then(res => {
                    if (res.code === 'success') {
                        res.body.listdata.forEach(nodelog => {
                            if (nodelog.completeTime === null) nodelog.completeTime = '未完成'
                            if (nodelog.limitTime === null) nodelog.limitTime = '无时限'
                            if (nodelog.pathName === null) {
                                if (nodelog.taskType === 0 || nodelog.taskType === 9) {
                                    if (nodelog.openTime === null) {
                                        nodelog.pathName = '待阅'
                                    } else {
                                        nodelog.pathName = '已阅'
                                    }
                                } else {
                                    nodelog.pathName = '未提交'
                                }
                            }
                            if (nodelog.idea === null || nodelog.idea === '') {
                                nodelog.ideaContent = '无'
                            } else if (nodelog.idea.indexOf('{handwriting:1,') === 0) {
                                nodelog.ideaContent = '<img name="handwritingidea" class="handwritingIdea" src="./apigw/workflow/wfInstanceNodelog/viewHandwritingIdea?wfNodelogId=' + nodelog.id + '"></img>'
                            } else {
                                nodelog.ideaContent = nodelog.idea
                            }
                        })
                        this.callbackMode = res.body.callbackMode
                        this.msgTypeOptions = res.body.msgTypeOptions || null

                        if (res.body.callbackSendsms !== null) {
                            this.callbackSendsms = parseInt(res.body.callbackSendsms)
                        }

                        this.callTNID = this.curTN.tnID
                        this.wfNodelogList = res.body.listdata

                        this.loading = false
                    } else {
                        this.$alert(res.message, '操作提示', { type: 'error', callback: () => {
                            this.closeDialog()
                            this.loading = false
                        } })
                    }
                }).catch(err => {
                    console.log(err)
                    this.loading = false
                })
            })
        },
        // 收回文件
        btnCallbackClick() {
            if (this.selTNID.length === 0) {
                this.$alert('没有能够收回的处理环节！', '操作提示')
                return
            }
            this.$confirm('您是否确认要收回文件？', '确认操作', { type: 'warning' })
                .then(() => {
                    const reqParams = { 'wfInstanceId': this.wfInstance.id, 'modifyType': this.modifyType, 'callTNID': this.callTNID, 'selTNID': this.selTNID.join(','), 'callbackMode': this.callbackMode }
                    if (this.msgTypeOptions !== null) {
                        // 7.1.0+版接口
                        reqParams.sendMsg = this.callbackSendsms
                    } else {
                        // 7.0.0版接口
                        reqParams.sendSms = this.callbackSendsms
                    }
                    this.$http({
                        method: 'PUT',
                        contentType: 'application/x-www-form-urlencoded',
                        params: reqParams,
                        url: this.modifyWfNodelogUrl
                    }).then(res => {
                        if (res.code === 'success') {
                            let openerUrl = location.href
                            if (openerUrl.indexOf('&wfNodelogId=') !== -1) {
                                openerUrl = openerUrl.substring(0, openerUrl.indexOf('&wfNodelogId=')) + openerUrl.substring(openerUrl.indexOf('&wfNodelogId=') + 32 + 13)
                                location = openerUrl
                                location.reload()
                            } else {
                                location.reload()
                            }
                        } else {
                            this.$alert(res.message, '操作提示', { type: 'error' })
                        }
                    })
                })
        },
        // 删除流程节点
        btnDeleteWflogClick(row) {
            if (row && row.id) this.selTNID = [row.id]

            if (this.selTNID.length === 0) {
                this.$alert('请选择需要删除的流程处理环节！', '操作提示')
                return
            }
            this.$confirm('您确定要删除选择的流程处理环节吗？', '确认操作', { type: 'warning' })
                .then(() => {
                    this.$http({
                        method: 'PUT',
                        contentType: 'application/x-www-form-urlencoded',
                        params: { 'wfInstanceId': this.wfInstance.id, 'modifyType': 'delete', 'selTNID': this.selTNID.join(',') },
                        url: this.modifyWfNodelogUrl
                    }).then(res => {
                        if (res.code === 'success') {
                            this.loadWfNodelogList()
                        } else {
                            this.$alert(res.message, '操作提示', { type: 'error' })
                        }
                    })
                })
        },
        btnAddWfUserClick(wflog) {
            this.$bus.emit('showModifyWflogAddUser', this.wfInstance, wflog)
        },
        btnFlowAdminToNextClick(wflog, actionType) {
            this.$bus.emit('showModifyWflogSubmitFile', wflog, actionType)
        },
        btnModifyIdeaClick(wflog) {
            this.$bus.emit('showModifyWflogIdea', wflog)
        },
        onSelectStaffCompleted(selectedNodes, attr) {
            // 转派选择处理人完成
            if (attr.name === 'WflowForward') {
                this.$http({
                    method: 'PUT',
                    contentType: 'application/x-www-form-urlencoded',
                    params: { 'wfInstanceId': this.wfInstance.id, 'modifyType': 'forward', 'callTNID': this.callTNID, 'selTNID': attr['wflog-id'], 'newStaffId': selectedNodes[0].id },
                    url: this.modifyWfNodelogUrl
                }).then(res => {
                    if (res.code === 'success') {
                        if (!this.curTN.tnNodeID) {
                            // 当前用户无办理权限，属于流程管控转办，转办后重新加载流程日志
                            this.loadWfNodelogList()
                        } else {
                            this.$alert('已经成功将文件转给' + selectedNodes[0].name + '办理。', '操作提示', { type: 'success' })
                            setTimeout(() => {
                                const btnRefresh = window.opener.document.querySelector('.el-icon-refresh')
                                if (btnRefresh !== null) btnRefresh.parentElement.click()
                                this.$vnode.context.btnCloseClick()
                            }, 1500)
                        }
                    } else {
                        this.$alert(res.message, '操作提示', { type: 'error' })
                    }
                })
            }
        },
        forwardTodo() {
            // 当前处理人流程表单直接转办
            const el = {
                attrs: {
                    'dialog-title': '选择转办人员',
                    'name': 'WflowForward',
                    'wflog-id': this.curTN.tnID,
                    'org-id': this.curTN.staffOrgID.split('-')[1]
                },
                value: ''
            }
            const binding = {
                'value': 'staff'
            }
            const vnode = {
                context: this,
                data: {
                    attrs: el.attrs,
                    model: {
                        value: '',
                        expression: 'newStaffId'
                    }
                }
            }
            this.$bus.emit('openSelectDialog', el, binding, vnode)
        },
        closeDialog() {
            this.dialogFormVisible = false
            this.wfInstance = {}
            this.curTN = {}
            this.wfNodelogList = []
        }
    }
}
</script>

<style scoped lang="scss">
    /deep/ .el-dialog__body{
        min-height:500px;

        .handwritingIdea{
            width: 100px;
        }
    }

    /deep/ .el-table__row{
        .cell{
            line-height: 18px;
        }

        td{
            padding:5px 0;
        }

        .el-checkbox__label{
            display:none;
        }
    }

    .el-table-toolbar{
        margin: 0 0 10px 0;
        .el-row{
            height: 32px;
            line-height: 32px;
        }
    }
    .el-table-toolbar-right{
        text-align: right;

        /deep/ .el-checkbox__input+.el-checkbox__label{
            color:inherit;
            margin-right: 10px;
        }
    }
    .msgType-select{
        width: 130px;
        top: 2px;
        /deep/ .el-input--medium .el-input__inner{
            height: 32px;
            line-height: 32px;
        }
        /deep/ .el-input--medium .el-input__icon{
            line-height: 32px;
        }
    }

</style>
